<template>
  <div class="catr-control">
    <transition name="move">
    <div class="cart-decrease" v-show="food.count>0" @click="descCart">
    <span class="inner icon-remove_circle_outline"></span>
    </div>
    </transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add icon-add_circle" @click="addCart"></div>
  </div>
</template>

<script>
  import Vue from 'vue'
    export default {
        name: 'addcart',
      props: {
        food: {
          type: Object
        }
      },
      created () {
          // console.log(this.food)
      },
      methods: {
        addCart () {
          if (!this.food.count) {
            Vue.set(this.food, 'count', 1)
            // this.food.count = 1
          } else {
            this.food.count++
          }
        },
        descCart () {
          this.food.count--
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.catr-control
  font-size: 0
.cart-decrease
  display: inline-block
  padding: 6px
  opacity: 1
  transform: translate3d(0, 0, 0)
  .inner
    display: inline-block
    line-height: 24px
    font-size: 24px
    color: rgb(0, 160, 220)
    transition: all 0.4s linear
    transform: rotate(0)
  &.move-enter-active, &.move-leave-active
    transition: all 0.4s linear
  &.move-enter, &.move-leave-active
    opacity: 0
    transform: translate3d(24px, 0, 0)
    .inner
      transform: rotate(180deg)
.cart-add
  display: inline-block
  padding: 6px
  line-height: 24px
  font-size: 24px
  color: #00a0dc
.cart-count
    display: inline-block
    padding-top: 6px
    font-size: 10px
    color:rgb(147,153,159)
    text-align: center
    line-height:24px
    vertical-align: top;
</style>
